<template>
	<view>
		<view class="search-container"  :style="{'background-color': bkgcolor}">
			<view class="my-search-box" v-for="(value,index) in iconType" :key="index" :style="{'border-radius':radius+'px'} ">
				<icon :type="value" size="16" />
				<text class="placeholder">搜索</text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "my-search",
		data() {
			return {
				iconType: ['search']
			}
			},
			// 为了增强组件的复用性我们可以我搜索框的背景颜色和圆角显示自定义
			props:{
				 bkgcolor:{
					 type:String,
					 default:'#C00000'
				 },
				 radius:{
					 type:Number,
					 default:18
				 }
				 
			}
		
	}
</script>

<style lang="scss">
// 搜索的样式
.search-container{
	display: flex;
	// background-color: #C00000;
	height: 45px;
	padding: 0 10px;
	align-items: center;
	.my-search-box{
		display: flex;
		background-color: #fff;
		height: 31px;
        align-items: center;
		justify-content: center;
		width: 100%;
		padding: 0 10px;
		font-size: 12px;
		// border-radius: 18px;
		.placeholder{
			
			font-size: 15px;
			margin-left: 5px;
		}
	}
}
</style>
